<template>
			<view class="image-content">
			<image style="width: 100%; height: 180px; background-color: #eeeeee;"  src="@/static/images/duihuan_01.png"
			></image>
			</view>
			
			<view :class="{  
    'tabgb1': state.tabindex === 1,  
    'tabgb2': state.tabindex === 2  
  }">
				<div class="tabbgleft " :class="{ 'tabactive': state.tabindex == 1 }" @click="tabchange">扫码兑换</div>
				<div class="tabbgright" :class="{ 'tabactive': state.tabindex == 2 }"  @click="tabchange">数字验证</div>
			</view>
			<view v-show="state.tabindex == 1" class="tabcon1">
				<view style="height: 70px; line-height: 80px; font-size: 18px; width: 100%; text-align: center;">刮开防伪码涂层，露出二维码</view>
				<view style="height: 150px; position: relative;"><image style="height: 140px;" src="@/static/images/tabcon1.png"></image></view>
				<view style="width: 80%; margin: 0 auto;"><button type="primary" @click="gotoscan">扫码</button></view>
			</view>
			<view v-show="state.tabindex == 2" class="tabcon2">
				<view style="height: 50px; line-height: 60px; font-size: 18px; width: 100%; text-align: center;">刮开防伪码涂层，露出20位数字</view>
				<view style="height: 140px; position: relative;    margin-top: -10px;"><image style="height: 140px;" src="@/static/images/tabcon2.png"></image></view>
				<view style="height: 30px; width: 100%; position: relative;" class="uni-form-item uni-column">
					<view class="numleft"><input class="uni-input" value="22222"  type="number" :maxlength="5" placeholder="左上5位数字" @input="handleInput('in1', $event)" style="border: 1px solid #999;" />  </view>
					<view class="numright"><input 	class="uni-input" value="33333"  type="number" :maxlength="5" placeholder="右上5位数字" @input="handleInput('in2', $event)" style="border: 1px solid #999;" />  </view>
				</view>
				<view style="height: 30px; width: 100%; position: relative;" class="uni-form-item uni-column">
					<view class="numleft"><input 	class="uni-input"  value="44444"  type="number" :maxlength="5" placeholder="左下5位数字" @input="handleInput('in3', $event)" style="border: 1px solid #999;" />  </view>
					<view class="numright"><input 	class="uni-input"  value="55555"  type="number" :maxlength="5" placeholder="右下5位数字" @input="handleInput('in4', $event)" style="border: 1px solid #999;" />  </view>
				</view>
				<view style="width: 80%; margin: 0 auto;"><button type="primary" @click="getinputstrs">验证</button></view>
			</view>
			
			<view>{{state.resstr}}</view>
			<view>{{state.resstrinput}}</view>
			<view class="image-content" >
			<image style="width: 100%; height: 190px; background-color: #eeeeee;"  src="@/static/images/duihuan_06.png"
			></image>
			</view>
			
			<view class="image-content">
			<image style="width: 100%; height: 240px; background-color: #eeeeee;"  src="@/static/images/duihuan_07.png"
			></image>
			</view>
			
			<view class="image-content">
			<image style="width: 100%; height: 180px; background-color: #eeeeee;"  src="@/static/images/duihuan_08.png"
			></image>
			</view>
			
			<view style="width: 60%; margin: 0 auto; margin-top: 30px; margin-bottom: 30px;">
				<button class="btn-back" type="primary" @click="navigateTo('/pages/index/user')">返回个人中心</button>
				<button class="btn-dh" type="primary" @click="navigateTo('/pages/vasp/index')">查看已兑换</button>
			</view>

</template>

<script setup>
	import { reactive, computed, ref } from 'vue';  
	 import sheep from '@/sheep';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';

	
	const state = reactive({
		tabindex: 1,
		resstr:'',
		inputarr:['0','0','0','0'],
		resstrinput:'',
		});
	
	function tabchange()
	{
		if(state.tabindex==1)
			state.tabindex=2;
		else
			state.tabindex=1;
	}
	function gotoscan()
	{
		sheep.$platform.useProvider('wechat').jssdk.scanQRCode1((result) => {  
		  // 在这里处理扫码的结果 
		   //alert(result);
		   state.resstr=result.split('=')[1]
		  console.log('扫码结果:', result); 
		   sheep.$api.dhzengzhi.checkisbn({
		   	'isbn': state.resstr
		   }).then((res) => {
		   	console.log(res);
		   	if (res.data === true) {
		   		sheep.$helper.toast('正确');
				sheep.$router.go('/pages/goods/category?id=237');
		   	} else {
		   		// 未找到商品
		   		sheep.$helper.toast('错误码');
		   	}
		   });

	});  
	
	}
	
	function getinputstrs()
	{
		console.log(state.inputarr);
		var resstrinputs = state.inputarr.join(''); 
		 if(resstrinputs.length !== 20)
		 {
			 sheep.$helper.toast('请正确输入20位数字');
			 return;
		 }else{
			 state.resstrinput = resstrinputs;
			 console.log(sheep.$api);
			 sheep.$api.dhzengzhi.checkisbn({
			 	'isbn': state.resstrinput
			 }).then((res) => {
			 	//console.log(res);
			 	if (res.data) {
			 		//sheep.$helper.toast(res.msg);
					navigateTo("/pages/vasp/success?sn="+resstrinputs+"&relationid="+res.data)
					//sheep.$router.go('/pages/goods/category?id=237');
			 	} else {
			 		// 未找到商品
			 		sheep.$helper.toast('错误码');
			 	}
			 });
		 }
			
	}
	function handleInput(side, event) { 
		//console.log(event);
	  // 假设 state 是一个全局状态对象或者通过某种方式在组件中可用  
	  // 并且 state.inputarr 是一个已经初始化为空数组或者具有足够长度的数组  
	  
	  // 根据传入的 side 参数判断是哪个输入框，并更新对应的数组索引  
	  switch (side) {  
	    case 'in1':  
	      state.inputarr[0] = event.detail.value; // 更新第一个输入框的值  
	      break;  
	    case 'in2':  
	      state.inputarr[1] = event.detail.value; // 更新第二个输入框的值  
	      break;  
	    case 'in3':  
	      state.inputarr[2] = event.detail.value; // 更新第三个输入框的值（注意修正了拼写错误）  
	      break;  
	    case 'in4':  
	      state.inputarr[3] = event.detail.value; // 更新第四个输入框的值  
	      break;  
	    default:  
	      console.error('Unknown input side:', side); // 处理未知情况  
	  }  
	  
	  // 将数组元素用空格连接起来形成一个字符串  
	  
	  
	  // 你可以在这里添加其他逻辑，比如验证输入值等  
	}
	function navigateTo(path) {
		//alert("121212");
		sheep.$router.go(path);
		}
	
</script>

<style>
.btn-back{
		background: #e9b665;
		margin-bottom: 20px;
		border-radius: 20px;
	}
	.btn-dh{
		background: #ff5160;
		margin-bottom: 20px;
		border-radius: 20px;
	}
	.image-content{
		width: 96%;
		margin: 0 auto;
		
	}
	.image-content image{
		border-radius: 10px;
		margin-top: 10px;
	}
	.tabgb1{
		
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
		height: 60px;
		background-image: url('@/static/images/tabqie1.png');
		background-size: cover;
		position: relative;
	}
	.tabgb2{
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
		height: 60px;
		background-image: url('@/static/images/tabqie2.png');
		background-size: cover;
		position: relative;
	}
	.tabbgleft{height: 60px;width: 50%; text-align: center; line-height: 60px; float: left; }
	.tabbgright{height: 60px;width: 50%; text-align: center; line-height: 60px;float: right;}
	.tabactive{font-weight: bold;color: #333; font-size: 18px;}
	.tabcon1{
		width: 96%;
		margin: 0 auto;
		height: 300px;
		background-color: #ffffff;
	}
.tabcon2{
		width: 96%;
		margin: 0 auto;
		height: 300px;
		background-color: #ffffff;
	}
	.numleft{width: 50%;float: left; height:30px; text-align: center; position: relative;}
	.numright{width: 50%;float: right; height:30px; text-align: center;position: relative;}
	.numleft input{ width: 60%;   margin: 0 auto; font-size: 14px;}
	.numright input{ width: 60%;    margin-left: 10%;font-size: 14px;}
	
.scan-button {  
    /* 样式根据您的设计需求进行调整 */  
    position: relative;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
	width: 100%;
	height: 20%;
}  
.scan-video {  
    /* 确保 video 元素足够大以捕捉二维码 */  
    width: 100%;  
    height: 100%; /* 或者设置一个具体的高度值 */  
    object-fit: cover;  
}  
.dhcon{
	width: 96%;
	margin: 15px auto;
	height: 180px;
}
.dhcon view{
	width: 30%;
	height: 150px;
	float: left;
	margin: 0 1.5% 0 1.5%;
	background-color: aquamarine;
	background-image: url('@/static/images/lvse1.png');
	background-size: cover;
	border-radius: 3px;
}
</style>
